<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="app-container" v-cloak v-loading="loading">
        <ud-card>

            <div class="myheader">
                <div class="part-left">
                    <el-radio-group v-model="riliType" size="small">
                        <el-radio-button label="new">一手房</el-radio-button>
                        <el-radio-button label="old">二手房</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="part-right">
                    <div class="block">
                        <el-button :disabled="loading" icon="el-icon-refresh" size="small" type="default" plain
                            @click="loadData">刷新</el-button>
                    </div>

                    <div class="block">
                        <ExcelUploaderBtn v-if="btns.create_signing" @success="uploadSuccess" :btnText="'导入' + btnText" :importType="importType" :api="importUrl" tpl="house-signings-tpl-v1.xlsx"></ExcelUploaderBtn>
                    </div>

                    <div class="block"> 
                        <el-button size="small" type="primary" icon="el-icon-plus" v-if="btns.create_signing"
                            @click="createHandle">新建网签数据</el-button>
                    </div>
                </div>
            </div>
            <el-divider></el-divider>
            <el-table v-loading="loading" :data="items" size="small" fit highlight-current-row>
                <el-table-column prop="id" width="120px" label="#" />
                <el-table-column label="日期">
                    <template slot-scope="scope">
                        <!-- 使用模板插槽自定义列内容，拼接年月日 -->
                        {{ scope.row.year }}-{{ scope.row.month }}-{{ scope.row.day }}
                    </template>
                </el-table-column>
                <el-table-column v-if="riliType == 'old'" prop="count" label="二手房成交套数" />
                <el-table-column v-if="riliType == 'new'" prop="post_count" label="一手房成交套数" />
                <el-table-column label="操作" width="80px">
                    <template slot-scope="scope">
                        <el-link v-if="btns.update_signing" type="primary" @click="editHandle(scope.row)">管理</el-link>
                        <el-link v-if="btns.delete_signing" type="danger" @click="deleteHandle(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pager">
                <el-pagination hide-on-single-page background layout="total, sizes, prev, pager, next, jumper"
                    :total="total" :page-sizes="[10, 20, 50, 100]" :page-size="per_page"
                    @current-change="updateCurrentPage" @size-change="updatePageSize" />
            </div>

            <el-dialog title="编辑" :visible.sync="showForm" :destroy-on-close="true" width="400px" :close-on-click-modal="false">
                <el-form label-width="120px" label-position="right">

                    <el-form-item label="日期">
                        <el-date-picker v-model="currentItem.date" type="date" value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="二手房成交套数" v-if="riliType == 'old'">
                        <el-input v-model="currentItem.count" min="0" type="number" style="width: 220px;"
                            placeholder="请输入二手房成交数量"></el-input>
                    </el-form-item>

                    <el-form-item label="一手房成交套数" v-if="riliType == 'new'">
                        <el-input v-model="currentItem.post_count" min="0" type="number" style="width: 220px;"
                            placeholder="请输入一手房成交数量"></el-input>
                    </el-form-item>

                    <!-- <el-form-item label="颜色">
                        <el-color-picker v-model="currentItem.color"></el-color-picker>
                    </el-form-item> -->

                </el-form>
                <div slot="footer" v-loading="loading">
                    <el-button size="mini" @click="cancleHandle" icon="el-icon-close">取消</el-button>
                    <el-button size="mini" type="primary" @click="submitHandle" icon="el-icon-check">确定</el-button>
                </div>

            </el-dialog>
        </ud-card>
    </div>
</template>

<script>
import { getHouseSignList, deleteHouseSign, updHouseSign, updPostSign, } from "@/api/house-signings";
import ExcelUploaderBtn from '@/components/ExcelUploaderBtn.vue';

export default {
    name: "houseSign",
    components: {ExcelUploaderBtn},
    data() {
        return {
            showForm: false,
            page: 1,
            items: [],
            // posts: [],
            currentItem: {
                date: '',
                count: null,
                post_count: null,
            },

            per_page: 10,
            total: null,
            loading: true,
            riliType: 'new',
        };
    },
    watch: {
        page: function (newVal, oldVal) {
            this.loadData();
        },
        per_page: function (newVal, oldVal) {
            this.loadData();
        },
    },

    props: {
        btns: { type: Object, default: {} },
    },

    mounted: function () {
        // this.loadAllPosts();
        this.loadData();
    },

    computed: {
        btnText: function () {
            return this.riliType == 'new' ? '一手房网签数据' : '二手房网签数据';
        },
        importUrl: function () {
            return this.riliType == 'new' ? '/api/admin6/house_signing/import/0' : '/api/admin6/house_signing/import/1';
        },
        importType: function () {
            return this.riliType == 'new' ? '一手房网签' : '二手房网签';
        }
    },

    methods: {

        reloadHandle: function () {
            this.showForm = false;
            this.loading = true;
            this.loadData();
        },

        uploadSuccess(){
            this.loadData()
        },

        updateCurrentPage: function (page) {
            this.page = page;
        },

        updatePageSize: function (size) {
            this.per_page = size || 10;
        },

        cancleHandle: function () {
            this.showForm = false;
            this.loadData();
        },

        submitHandle: function () {
            // post
            var currentItem = this.currentItem;
            if (!currentItem.date) {
                this.$message.error('请填写日期');
                return false;
            }

            if (this.riliType == 'old') {
                if (!currentItem.count) {
                    this.$message.error('请填写二手房成交数量');
                    return false;
                }
                if (currentItem.count < 0) {
                    this.$message.error('二手房成交数量不能小于0');
                    return false;
                }
            }
            if (this.riliType == 'new') {
                if (!currentItem.post_count) {
                    this.$message.error('请填写一手房成交数量');
                    return false;
                }
                if (currentItem.post_count < 0) {
                    this.$message.error('一手房成交数量不能小于0');
                    return false;
                }
            }

            const [year, month, day] = currentItem.date.split('-');

            // 设置拆分后的值给 currentItem
            currentItem.year = year;
            currentItem.month = month;
            currentItem.day = day;

            this.loading = true;

            if(this.riliType == 'old'){
                updHouseSign(currentItem).then((res) => {
                    this.loading = false
                    if (res.code != 0) {
                        return false;
                    }
                    this.showForm = false;
                    this.loadData();
                    this.$message.success("保存成功");
                });
                return
            }

            updPostSign(currentItem).then((res) => {
                this.loading = false
                if (res.code != 0) {
                    return false;
                }
                this.showForm = false;
                this.loadData();
                this.$message.success("保存成功");
            });

        },
        createHandle: function () {
            // 点击新建按钮
            var currentItem = {
                date: '',
                count: null,
            };
            this.currentItem = currentItem;
            this.showForm = true;
        },
        editHandle: function (item) {
            item.date = item.year + '-' + item.month + '-' + item.day;
            var currentItem = {
                date: item.year + '-' + item.month + '-' + item.day,
                post_count: item.post_count,
                count: item.count,
                id: item.id,
            };
            this.currentItem = currentItem;
            this.showForm = true;
        },
        deleteHandle: function (eid) {
            this.$confirm("确定要删除这条数据吗？", "删除提醒").then((res) => {
                this.loading = true
                deleteHouseSign(eid).then((res2) => {
                    this.loadData()
                    if (res2.status != 0) {
                        return false;
                    }
                    this.$message.success("已删除");
                });
            });
        },

        loadData: function () {
            this.loading = true;
            var data = {}
            var data = {
                page: this.page,
                per_page: this.per_page,
            };

            getHouseSignList(data).then((res) => {
                this.loading = false;
                if (res.code != 0) {
                    // this.$message.error(res.msg);
                    return false;
                }
                this.items = [];
                // var events = res.data.map((event, i) => {
                //   event.updated_at = event.updated_at.split(".")[0].replace("T", " ");
                //   event.push = event.push_enable == true ? "已推送" : "不推送";
                //   return event;
                // });
                this.items = res.data.data;
                this.total = res.data.page.total_items
            });
        },
    },
};
</script>

<style scoped lang="scss">
.myheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding: 20px 0px;

    .part-right {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .block {
            margin-left: 10px;
        }
    }

    .part-left {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .block {
            margin-right: 10px;
        }
    }
}

.event-image-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.event-image-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    height: 125px;
    font-size: 12px;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 10px;
}

.event-image-item.new-image {
    justify-content: center;
    align-items: center;
    cursor: hand;
}
</style>
